<template>
  <div class="container">
    <div class="opt-area-03">
      <div class="left-con">
        <community-select style="margin-bottom:-10px;margin-top: -5px" ref="communitySelect" @callBack="callBack"></community-select>
        <div class="input-frame" style="width: 164px">
          <DatePicker type="date" placeholder="开始日期" v-model="params.start_time" />
        </div>
        <div class="input-frame" style="width: 164px">
          <DatePicker type="date" placeholder="结束日期" v-model="params.end_time" />
        </div>
        <Button class="btnClass" type="info" size="small" @click="init()">搜索</Button>
      </div>
    </div>
    <div>
      <gas-warner-statistics-line-echart ref="gasWarnerStatisticsLineEchart"></gas-warner-statistics-line-echart>
    </div>
  </div>
</template>

<script>
import { getGasWarnerStatistics } from '@/api/z-new-grid'
import { date2str } from '@/api/eventlist'
import CommunitySelect from '@/components/community-select/community-select'
import GasWarnerStatisticsLineEchart from '../components/gas-warner-statistics-line-echart'

export default {
  components: { CommunitySelect, GasWarnerStatisticsLineEchart },
  data () {
    return {
      severUserInfo: {},
      row: {},
      modal: {
        title: '',
        show: false
      },
      params: {
      }
    }
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
    this.init()
    this.$refs.communitySelect.init(this.severUserInfo)
  },
  methods: {
    init () {
      if (this.params.start_time) {
        this.params.start_time = date2str(this.params.start_time)
      }
      if (this.params.end_time) {
        this.params.end_time = date2str(this.params.end_time)
      }
      getGasWarnerStatistics(this.params).then(async ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.$refs.gasWarnerStatisticsLineEchart.chart(data.data)
        } else {
          this.error(data)
        }
      })
    },
    callBack (e) {
      console.log('callBack', e)
      this.params.area_id = e.area_id
      this.params.street_id = e.street_id
      this.params.community_id = e.community_id
      // this.searchData()
    },
    success () {
      this.$Message.success('操作成功')
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  watch: {
  }
}
</script>

<style scoped>
.container{
  padding: 12px;
}
.page_style {
  margin: 20px 5px;
}

.input-frame {
  width: 120px;
  margin-right: 10px;
  float: left;
}

.house-list > .group {
  background: white;
  padding: 10px;
  margin-top: 10px;
}

.house-list > .group > .item {
  border-bottom: 1px solid #f5f5f5;
  padding: 10px 0;
}

.house-list > .group > .item .top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.house-list > .group > .item .title {
  font-size: 14px;
  color: #333333;
}

.house-list > .group > .item .address {
  font-size: 12px;
  color: gray;
  display: flex;
  align-items: center;
}

.house-list > .group > .item .detail {
  font-size: 12px;
  color: dodgerblue;
}

.opt-area-03 {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #abdcff;
  background-color: #f0faff;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.opt-area-03 .right-con {
  width: 100%;
  margin-top: 5px;
  display: flex;
}

.opt-area-03 .left-con {
  font-size: 14px;
  width: 100%;
}

.opt-area-03 .left-con span {
  font-weight: bold;
}

.opt-area-03 .right-con input {
  width: 150px;
  margin-right: 10px;
}

.opt-area-03 .right-con .input-frame {
  width: 200px;
  margin-right: 10px;
}

.table-action-btn {
  margin-bottom: 3px;
}

.container >>> .ivu-btn-small {
  height: 24px;
  padding: 0 5px;
  font-size: 12px;
  border-radius: 3px;
}
@keyframes ani-demo-spin {
  from { transform: rotate(0deg);}
  50%  { transform: rotate(180deg);}
  to   { transform: rotate(360deg);}
}
.demo-spin-col{
  height: 100px;
  position: relative;
  /*border: 1px solid #eee;*/
}
.container>>>.ivu-icon-ios-arrow-forward:before{
  color: black;
}
.btnClass{
  margin-top: 5px;
  margin-right:5px
}
</style>
